<script setup lang="ts">
import type { Comment as CommentType } from '@/apis/methods/comment.api'
import ReplyItem from './ReplyItem.vue'
import { PhArrowClockwise } from '@phosphor-icons/vue'

interface Props {
  replies?: CommentType[]
  hasMore?: boolean
  submitting?: boolean
  parentId?: string
}

const props = withDefaults(defineProps<Props>(), {
  replies: () => [],
  hasMore: false,
  submitting: false,
})

const emit = defineEmits<{
  loadMore: [parentId: string]
  toggleLike: [commentId: string]
  createReply: [parentId: string, content: string, mentionedUsers: string[]]
  cancel: []
}>()

const handleLoadMore = () => {
  if (props.parentId) {
    emit('loadMore', props.parentId)
  }
}

const handleToggleLike = (commentId: string) => {
  emit('toggleLike', commentId)
}

const handleCreateReply = (parentId: string, content: string, mentionedUsers: string[] = []) => {
  emit('createReply', parentId, content, mentionedUsers)
}

const handleCancel = () => {
  emit('cancel')
}
</script>

<template>
  <div class="reply-list">
    <!-- 回复列表 -->
    <div v-if="replies && replies.length > 0" class="space-y-4">
      <ReplyItem
        v-for="reply in replies"
        :key="reply.id"
        :reply="reply"
        :submitting="submitting"
        @toggle-like="handleToggleLike"
        @create-reply="handleCreateReply"
      />
    </div>

    <!-- 加载更多回复 -->
    <button v-if="hasMore" @click="handleLoadMore" class="btn btn-ghost btn-sm w-full gap-2">
      <PhArrowClockwise :size="12" />
      加载更多回复
    </button>
  </div>
</template>

<style scoped>
.reply-list {
  animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
